<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    #div1 {
      width: 400px;
      height: 200px;
      border: 1px solid red;
    }

    #div2 {
      width: 400px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <input type="button" value="克隆" id="clone" />
  <div id="div1">
    <span>span1</span>
    <p>p1
      <b>b1</b>
    </p>
  </div>
  <br /><br />
</body>

</html>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    $('#clone').click(function () {
      // 声明一下
      var $cloneP = $('#div1').clone(true);
      // console.log($cloneP);
      // .attr('name','tom')
      // 通过attr改变clone的id名
      $cloneP.attr('id','div2')
      // 追加到body上并渲染到页面
      $('body').append($cloneP)
    })
  });
</script>